import * as echarts from 'echarts'
import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'

export const MinPre = forwardRef<{ resize: () => void }, any>(
  ({ data, color, title }, ref) => {
    const chartDom = useRef<HTMLDivElement>(null)
    const myChart = useRef<echarts.EChartsType>()

    useEffect(() => {
      if (!chartDom.current) {
        return
      }
      const data2 = (data ?? []).map((v: any, i: number) => {
        return {
          ...v,
          labelColor: color[i][2],
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: color[i][0] }, // 0% 处的颜色
                { offset: 1, color: color[i][1] } // 100% 处的颜色
              ],
              global: false // 缺省为 false
            }
          }
        }
      })
      if (!myChart.current) {
        // 初始化值
        myChart.current = echarts.init(chartDom.current, null, {
          renderer: 'canvas'
        })
        myChart.current.setOption({
          showEmptyCircle: true,
          //提醒条
          tooltip: {
            show: false,
            trigger: 'item'
          },
          // graphic: {
          //   type: "circle",
          //   shape: {
          //     cx: "7%", // 圆心横坐标，相对于容器宽度的比例
          //     cy: "70%", // 圆心纵坐标，相对于容器高度的比例
          //     r: 20 // 圆的半径
          //   },
          //   style: {
          //     fill: "#fff", // 圆形的填充色
          //     stroke: "#fff", // 圆形的边框色
          //     lineWidth: 2 // 边框宽度
          //   }
          // },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['79%', '100%'],
              center: ['center', 'center'],
              // padAngle: 4,
              labelLine: {
                show: false
              },
              label: {
                show: false
              },
              itemStyle: {
                // borderRadius: 10,
                borderColor: '#181818',
                borderWidth: 2
              },
              avoidLabelOverlap: false,
              animation: true,
              hoverAnimation: true,
              emphasis: {
                scale: false
              },
              emptyCircleStyle: {
                color: 'rgba(0, 0, 0, 0.60)' // 设置没数据的样式
              }
            },

            {
              type: 'pie',
              zlevel: 2,
              silent: true,
              radius: ['50%', '52%'],
              center: ['50%', '50%'],
              startAngle: 50,
              emptyCircleStyle: {
                color: 'rgba(255, 255, 255, 0.12)'
              }
            }
          ]
        })
      } else if (myChart.current) {
        myChart.current.setOption({
          showEmptyCircle: true,
          series: [
            {
              data: data2.every((item: any) => item.value === 0) ? [] : data2,
              emptyCircleStyle: {
                color: 'rgba(0, 0, 0, 0.60)' // 设置没数据的样式
              }
            }
          ]
        })
      }
    }, [data])
    useEffect(() => {
      return () => {
        if (myChart.current && !myChart.current.isDisposed()) {
          echarts.dispose(myChart.current)
        }
      }
    }, [])

    /*视口改变 echarts  -resize*/
    useImperativeHandle(ref, () => ({
      resize: () => {
        if (myChart.current) {
          // console.log("--Left&Right--MinPire--resize--")
          myChart.current.resize()
        }
      }
    }))

    return (
      <div className="pie-box flexr alc">
        <div
          ref={chartDom}
          style={{ width: '64px', height: '64px' }}
          className="echarts-pie"
        ></div>
        <div className="pie-legend" style={{ marginLeft: 12 }}>
          <div className="pie-legend-tit">{title}</div>
          <div className="flex alc">
            {data.map((item: any, index: number) => {
              return (
                <div className="flexr jub  alc" key={index}>
                  <div
                    className="item-piont flexr"
                    style={{ color: color[index][1] }}
                  >
                    {item.piont || 0}
                    <span className="bfh">%</span>
                  </div>
                  <div
                    className="item-name"
                    style={{ width: 80, textAlign: 'left', marginTop: '-2px' }}
                  >
                    {item.name}
                  </div>
                </div>
              )
            })}
          </div>
        </div>
      </div>
    )
  }
)
